import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input, DatePicker, Card, Table, message, Tag, Drawer,Modal } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../../api/cyyindex'
import {hoverCom} from '../../Cursor'
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import '../Roster/roster.scss'

const { Search } = Input;
const { RangePicker } = DatePicker;
interface Props {

}
interface DataType {
  rid: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
}
function Roster(props: Props) {
  
  var dispatch=useDispatch()
  const navigate = useNavigate()
  const [messageApi, contextHolder] = message.useMessage();
  const [stafflist, setStafflist] = useState([])
  const [list, setList] = useState([])
  const [modal1Open, setModal1Open] = useState(false);
  const [modal2Open, setModal2Open] = useState(false);
  
  useEffect(() => {
    service.staff_list1().then((res: any) => {
      console.log(res)
      setStafflist(res.data.data)
    })
  }, [])

  const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    } else {
      console.log('Clear');
    }
  };
  const rangePresets: {
    label: string;
    value: [Dayjs, Dayjs];
  }[] = [
      { label: '今天', value: [dayjs().add(0, 'd'), dayjs()] },
      { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
      { label: '近3天', value: [dayjs().add(-3, 'd'), dayjs()] },
      { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
      { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
      { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
    ];
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onSearch = (value: string) => {
    service.staff_search1({ name: value }).then(res => {
      console.log(res)
      setStafflist(res.data.data)
     })
    console.log(value)
    
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const handleChange = (value: string) => {
    service.staff_search1({ station: value }).then(res => {
      console.log(res)
      setStafflist(res.data)
     })
    console.log(`selected ${value}`);
  };
  const handleChange1 = (value: string) => {
    console.log(`selected ${value}`);
   
  };
  const handleChange2 = (value: string) => {
    console.log(`selected ${value}`);
 
  };
  const handleChange3 = (value: string) => {
    console.log(`selected ${value}`);
   
  };
  const handleChange4 = (value: string) => {
    console.log(`selected ${value}`);
 
  };
  const myDelete = async (id: any) => {
    setModal1Open(false)
    var res = await service.staff_delete1({ rid: id })
    console.log(res)
    if (res.data.code == 200) {
      messageApi.open({
        type: 'success',
        content: '已删除',
      });
    }
    service.staff_list1().then((res: any) => {
      console.log(res)
      setStafflist(res.data.data)
    })
  }
 
  const myEdit = (id:any) => {
    navigate({ pathname: '/index/staff/rosteradd', search: `?id=${id}` } ) 
  }


  const columns: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '工号',
      dataIndex: 'jobnumber',
      key: 'jobnumber',
    },
    {
      title: '部门',
      dataIndex: 'section',
      key: 'section',
      
      
    },
    {
      title: '手机号码',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '职位',
      key: 'station',
      dataIndex: 'station',
    },
    {
      title: '类型',
      key: 'type',
      dataIndex: 'type',
    },
    {
      title: '证件类型',
      key: 'papers',
      dataIndex: 'papers',
    },
    {
      title: '身份证号',
      key: 'idnumber',
      dataIndex: 'idnumber',
    },
    {
      title: '入职日期',
      key: 'data',
      dataIndex: 'data',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          
          <Tag color='blue' onClick={() => { myEdit(record.rid) }} style={{cursor:"pointer"}} >编辑</Tag>
          <Tag color='red' onClick={()=>{setModal1Open(true)}} style={{cursor:"pointer"}} >删除</Tag>
          <Modal
        title="确认删除吗?"
        style={{ top: 20 }}
        open={modal1Open}
        onOk={() =>{ myDelete(record.rid) } }
        onCancel={() => setModal1Open(false)}
      />
         
      
        
        
        
        </>
          
         
        
          
       
      ),
    },
  ];

  
  return (
    <div className='roster'> 
      <p className='title'>花名册</p>
      {/* 顶部搜索 */}
      <div className='box'>
      <Form
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        layout='inline'
      >
        <Form.Item
          label="职位"
          name="zhiwei"
          style={{ marginLeft: 30, marginTop: 10 }}
        >
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange}
            options={[
              { value: '产品经理', label: '产品经理' },
              { value: '设计主管', label: '设计主管' },
              { value: '设计师', label: '设计师' },
              { value: '前台', label: '前台', },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="职务"
          name="zhiwu"
          style={{ marginLeft: 30, marginTop: 10 }}
        >
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange1}
            options={[
              { value: '001', label: '员工' },
              { value: '002', label: '经理' },
              { value: '003', label: '办事员' },
              { value: '004', label: '董事', },
            ]}
          />
        </Form.Item>
        <Form.Item
          label="职级"
          name="zhiji"
          style={{ marginLeft: 30, marginTop: 10 }}
        >
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange2}
            options={[
              { value: '10', label: 'P1' },
              { value: '20', label: 'P2' },
              { value: '30', label: 'P3' },
              { value: '40', label: 'P4', },
            ]}
          />
        </Form.Item>
        <Form.Item style={{ marginLeft: 100, marginTop: 10 }}>
          <Button type="primary" htmlType="submit" onClick={() => { navigate("/index/staff/rosteradd") }}>
            新增员工
          </Button>
          <Button type="primary" htmlType="submit">
            导入
          </Button>
          <Button type="primary" htmlType="submit">
            导出
          </Button>
        </Form.Item>
        <Form.Item
          label="部门"
          name="bumen"
          style={{ marginLeft: 30, marginTop: 10 }}
        >
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange3}
            options={[
              { value: '11', label: '行政' },
              { value: '21', label: '人事' },
              { value: '31', label: '策划' },
              { value: '41', label: '产品', },
              { value: '51', label: '设计', },
              { value: '61', label: '研发', },
            ]}
          />
        </Form.Item>
        <Form.Item
          style={{ marginLeft: 30, marginTop: 10 }}
          label="工作地点"
          name="address"
        >
          <Select
            defaultValue="请选择"
            style={{ width: 200 }}
            onChange={handleChange4}
            options={[
              { value: '12', label: '总公司  总部' },
              { value: '23', label: '杭州分部  分公司' },
              { value: '34', label: '海南分部  分公司' },
              { value: '44', label: '天津分部  办事处' },
            ]}
          />
        </Form.Item>
        <Form.Item
          style={{ marginLeft: 30, marginTop: 10 }}
          label="选择日期"
          name="date"
        >
          <RangePicker presets={rangePresets} onChange={onRangeChange} />
        </Form.Item>
        <Form.Item
          style={{ marginLeft: 30, marginTop: 10 }}
          name="search"
        >
          <Search placeholder="请输入搜索内容" onSearch={onSearch} style={{ width: 200 }} />

        </Form.Item>
      </Form>
      {/* 卡片 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10 }}>
        {
          list.map((item: any, index: any) => {
            return (
              <Card style={{ width: 300, textAlign: 'center',fontSize:18 }}  >
                <p>{ item.name}</p>
                <p>{ item.shu}</p>
    
            </Card>
            )
          })
        }
        {contextHolder}
      </div>
      {/* 表格 */}
        <div style={{ marginTop: 20 }} className='table-box'>
          
        <Table columns={columns} dataSource={stafflist} />
      </div>
      </div>
    </div>
  );
}

export default Roster;